﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Knockout+ core examples</title>

    <style>
        body {
            margin: 50px;
        }
    </style>

    <!-- Dependencies -->
    <script src="dependencies/jquery-1.11.0.min.js"></script>
    <script src="dependencies/knockout-3.0.0.js"></script>

    <!-- Knockout+ core -->
    <script src="knockoutplus/knockoutpuls.core.1.2.0.js"></script>

    <!-- Apply view model -->
    <script>
        function CoreViewModel()
        {
            var $private = this;
            var $public = {};

            $private.getAsyncData = function ()
            {
                var dfd = new $.Deferred();
                setTimeout(function () { dfd.resolve("Async data: " + new Date()) }, 1000);
                return dfd.promise();
            }

            $public.setRandomStringValue = function ()
            {
                $public.stringValue(new Date().toLocaleTimeString());
            }

            $public.setRandomIntValue = function ()
            {
                $public.intValue(Math.floor((Math.random() * 10) + 1));
            }

            $public.setRandomFloatValue = function ()
            {
                $public.floatValue(Math.random());
            }

            $public.setAsyncData = function ()
            {
                $public.deferredData($private.getAsyncData());
            }

            $public.setSyncData = function ()
            {
                $public.deferredData("Sync data: " + new Date());
            }

            $public.setRandomValueForTraceValue2 = function ()
            {
                $public.traceValue2(new Date().toLocaleTimeString());
            }

            $public.stringValue = ko.observable("Hello!").extend({ trace: 'stringValue changed to: ' });
            $public.intValue = ko.observable(5);
            $public.floatValue = ko.observable();
            $public.deferredData = ko.observable($private.getAsyncData()).extend({ deferred: "Initial data" });
            $public.traceValue1 = ko.observable();
            $public.traceValue2 = ko.observable().extend({ trace: "traceValue2 changed to: " });

            return $public;
        }

        $(function ()
        {
            ko.applyBindings(new CoreViewModel());
        });
    </script>
</head>

<body>
    <h1>Include: knockoutpuls.core.1.0.2.js</h1>
    <hr />

    <h1>1. Custom bindings</h1>

    <h2>Binding type: trimmedValue</h2>

    <strong>Example 1:</strong>
    <pre>&lt;input type=&quot;text&quot; data-bind=&quot;<strong>trimmedValue: stringValue</strong>&quot; /&gt;</pre>

    <strong>Live example:</strong>
    <p>
        <span>Type string value including spaces</span>
        <input type="text" data-bind="value: stringValue" />&nbsp;&nbsp;&nbsp;&nbsp;
        <span>(current value is <strong data-bind="html: stringValue"></strong>)</span><br />
        <input type="button" data-bind="click: setRandomStringValue" value="Set random value" />
    </p>
    <br />

    <h2>Binding type: intValue</h2>

    <strong>Example 1:</strong>
    <pre>&lt;input type=&quot;text&quot; data-bind=&quot;<strong>intValue: { value: intValue, fallbackValue: 5 }</strong>&quot; /&gt;</pre>

    <strong>Live example: </strong>
    <p>
        <span>Type invalid integer value</span>
        <input type="text" data-bind="intValue: { value: intValue, fallbackValue: 5 }" />&nbsp;&nbsp;&nbsp;&nbsp;
        <span>(current value is <strong data-bind="html: intValue"></strong>)</span><br />
        <input type="button" data-bind="click: setRandomIntValue" value="Set random value" />
    </p>
    <br />

    <h2>Binding type: floatValue</h2>

    <strong>Example 1:</strong>
    <pre>&lt;input type=&quot;text&quot; data-bind=&quot;<strong>floatValue: { value: floatValue, fallbackValue: 3.14 }</strong>&quot; /&gt;</pre>

    <strong>Live example: </strong>
    <p>
        <span>Type invalid float value</span>
        <input type="text" data-bind="floatValue: { value: floatValue, fallbackValue: 3.14 }" />&nbsp;&nbsp;&nbsp;&nbsp;
        <span>(current value is <strong data-bind="html: floatValue"></strong>)</span><br />
        <input type="button" data-bind="click: setRandomFloatValue" value="Set random value" />
    </p>

    <hr />
    <br />
    <br />


    <h1>2. Custom observable extensions</h1>

    <h2>Extension: deferred</h2>

    <strong>Example 1:</strong>
    <pre>ko.observable().extend({ deferred: &quot;Initial data&quot; });</pre>

    <strong>Example 2:</strong>
    <pre>ko.observable(deferred).extend({ deferred: &quot;Initial data&quot; });</pre>

    <strong>Live example:</strong>
    <p>
        <span data-bind="html: deferredData"></span>
        <span data-bind="visible: deferredData.inProgress">(Loading...)</span>
        <br />
        <input type="button" data-bind="click: setAsyncData" value="Load async data" />
        <input type="button" data-bind="click: setSyncData" value="Load sync data" />
    </p>

    <hr />
    <br />
    <br />


    <h1>2. Tracking bingings</h1>

    <h2>Binding: trace</h2>

    <strong>Example 1:</strong>
    <pre>&lt;input type=&quot;text&quot; data-bind=&quot;<strong>value: traceValue1, trace: 'Binding for traceValue1'</strong>&quot; /&gt;</pre>

    <strong>Live example:</strong>
    <p>
        <span>Watch console for trace data for this binding</span>
        <input type="text" data-bind="value: traceValue1, trace: 'Binding for traceValue1'" />&nbsp;&nbsp;&nbsp;&nbsp;
    </p>
    <br />

    <h2>Extension: trace</h2>

    <strong>Example 1:</strong>
    <pre>ko.observable("Hello!").extend({ trace: 'someObservable changed to: ' });</pre>

    <strong>Live example:</strong>
    <p>
        <span>Type value and watch console for trace data</span>
        <input type="text" data-bind="value: traceValue2" />&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" data-bind="click: setRandomValueForTraceValue2" value="Set random value" />
    </p>
    <br />
</body>
</html>
